<template>
  <div id="app">
    <div class="boxs">
      <heads></heads>
      <main1></main1>
      <main2></main2>
      <main3></main3>
      <main4></main4>
      <main5></main5>
      <main6></main6>
    </div>
    <Footer class="footer"></Footer>
  </div>
</template>

<script>
import heads from '../components/header.vue';
import main1 from '../components/main1.vue';
import main2 from '../components/main2.vue';
import main3 from '../components/main3.vue';
import main4 from '../components/main4.vue';
import main5 from '../components/main5.vue';
import main6 from '../components/main6.vue';
import Footer from '../components/footer.vue'
export default {
  name: 'App',
  components: {
    heads,
    main1,
    main2,
    main3,
    main4,
    main5,
    main6,
    Footer,
  }
}
</script>

<style scoped>
.footer{
  position: fixed;
  bottom: 0;
}
.boxs{
  margin-bottom: 0.55rem;
}
</style>
